<template>
	
	<view :class="{bg141414:theme}" style="min-height: 100vh;">
		<view class="con pb200">
			<back title="确认订单"></back>
			<view :class="theme?'bg292929 colorfff':'bgF5F6F7'" class=" pg30-30 borderE1E1E1 ra20">
				<view class="flex-a-i ">
					<image mode="" class="wh150-150 ra20 image" :src="info.thumb"></image>
					<view class="ml15">
						<view class="bold size30">{{info.title}}</view>
						<view class="size22  flex">
							<view :class="theme?'bg292929 colorfff':'bgfff'" class=" mt10 mb10  color999">
								品牌商品
							</view>
						</view>
						<view class="size24 color999">
							规格：(默认)经典系列
						</view>
					</view>
				</view>

				<view class="flex-ju-b mt30 size26" style="border-top:1px #E1E1E1 dashed">
					<view class="pt30 color999">兑换数量</view>
					<view :class="theme?'bg141414 colorfff':'bgfff'" class="flex-a-i  center ra30">
						<!-- <view @click="tapnumebrs(1)" class="wh48-48 flex-ju-c ">-</view> -->
						<view>
							<input class="width95 " :class="theme?' colorfff':'color000'" v-model="number" />
						</view>
						<!-- <view @click="tapnumebrs(2)" class="wh48-48 flex-ju-c ">+</view> -->
					</view>
				</view>
				<view class="flex-ju-b mt40 size26">
					<view class="color999">消耗积分</view>
					<view class="color333 ">
						{{(info.integral *number)  }}积分
					</view>
				</view>
			</view>
			<view v-if="infoaddress.length==0" @click="tianjiadd" class="borderE1E1E1 pg30-30 ra20 flex-ju-b mt25">
				<view class="size26">请添加收货地址</view>
				<view class="color999 size26">
					<uni-icons type="right" size=""></uni-icons>
				</view>
			</view>
			
			<view v-else @click="tianjiadd" class="borderE1E1E1 pg30-30 ra20 flex-ju-b mt25">
				<view class="size26">
					<view style="width: 80%;">{{infoaddress.province}} {{infoaddress.city}} {{infoaddress.district}} {{infoaddress.address}}</view>
					<view class="mt10 color999">默认 {{infoaddress.consignee}}  {{infoaddress.phone}}</view>
				</view>
				<view class="color999 size26">
					<uni-icons type="right" size=""></uni-icons>
				</view>
			</view>
			
			
			<view :class="theme?'bg292929 colorfff':'bgF5F6F7'" class="borderE1E1E1 pg30-30 ra20 mt25">
				<view class="bold">说明</view>
				<view class="color999 size26">
					<view class="mt15">1.兑换后不支持退换货</view>
					<view class="mt10"> 2. 可兑换规格仅供参考</view>
					<view class="mt10"> 3. 实际库存以用户兑换情况为准数据可能存在延迟，敬请理解</view>
				</view>
				
			</view>
			<view class="flex-ju-c mt15 posifi width92vw bottom150">
				<view class="size24 flex-a-i color999">
					<radio style="transform:scale(0.7)" :borderColor="theme?'#FF6E44':'#000'" checked
						:activeBorderColor="theme?'#FF6E44':'#000'" :activeBackgroundColor="theme?'#FF6E44':'#000'" />
					我已阅读并同意<text @click="navto('/pages/agreement?xieyis=1')" class="color000">《购买须知》</text>
				</view>
			</view>

			<view class=" posifi width92vw bottom0 ">
				<view class="ra20 flex-ju-b pg30 bgfff height80"
					style="box-shadow: 0rpx -8rpx 24rpx 0rpx rgba(0,0,0,0.06);">
					<view class="bold size48  ">
						{{(info.integral * number)  }}
						<text class="size31">积分</text> 
					</view>
					<view @click="lijhuan" class="bold wh330-100 bg000 colorfff ra20 flex-ju-c   size29  ">
						立即兑换
					</view>
				</view>
			</view>
			
		</view>
	 
		
		 
		<uni-popup type="bottom" background-color="#fff" border-radius="20px 20px 0 0" ref="address">
			
			<view class="con mt30">
				<view class="flex-ju-b ">
					<uni-icons color="#fff" type="closeempty"></uni-icons>
					<view>收货地址</view>
					<uni-icons @click="$refs.address.close()" size="20" color="" type="closeempty"></uni-icons>
				</view>
			</view>
			<view class="con pb30">
				<view v-if="!addresses.length" class="flex-ju-c flex-col mt50" >
					<image mode="widthFix" src="/static/nodizhi.png" class="width100"></image>
					<view class="color999 size24 mt20">您还未添加收货地址</view>
				</view>
				<scroll-view scroll-y style="max-height: 65vh;">
					<view v-for="(item,p) in addresses" :key="p" class="bgF6F7F8 pg30 ra20 mt30">
						<view class="flex" style="justify-content: space-between;">
							<view @click="setresses(item.uuid)">
								<view class="flex">
									<view>
										<image mode="widthFix" src="/static/dingwei.png" class="width31 mt5 mr10"></image>
									</view>
									<view class="width65vw size28">{{item.province}} {{item.city}} {{item.district}} {{item.address}}</view>
								</view>
								<view class="flex-ju-b mt20 size26">
									<view class="flex-a-i color999 ">
										<image v-if="item.is_default" mode="widthFix" src="/static/gougou.png" class="width27 image mr10"></image>
										<view v-else class="wh23-23 ra23 border000 mr10"></view>
										设为默认地址
									</view>
									<view class="mr50">
										{{item.consignee}}  {{item.phone}}
									</view>
								</view>
							</view>
							
							<view class="">
								<view  class="mb25" @click="editaddress(p)">
									<uni-icons type="right" size="15" class="mt5" color="#999"></uni-icons>
								</view>
								<image @click="deladdres(p,item.uuid,item.is_default)" mode="widthFix" src="/static/del.png" class="width29"></image>
							</view>
						</view>
					</view>
					
				</scroll-view>
				<view @click="adddizhi" style="box-shadow: 0rpx -8rpx 24rpx 0rpx rgba(0,0,0,0.06);" class="flex-ju-c mt30 pt10 ra20">
					<view class="wh645-100 flex-ju-c ra20 bg000 colorfff">
						+添加收货地址
					</view>
				</view>
			</view>
		</uni-popup>
		
		<uni-popup type="bottom" background-color="#fff" border-radius="20px 20px 0 0" ref="add">
			<view class="con mt30">
				<view class="flex-ju-b ">
					<uni-icons color="#fff" type="closeempty"></uni-icons>
					<view>编辑地址</view>
					<uni-icons @click="$refs.add.close()" size="20" color="" type="closeempty"></uni-icons>
				</view>
			</view>
			
			<view class="con pb30">
				<view class="fabiew bgF6F7F8 pg30 ra20 size28 mt30">
					<view class="flex-a-i pb20 ">
						<view class="wwf">收货人</view>
						<input class="input" placeholder-style="color:#999;" v-model="consignee" placeholder="请输入真实姓名" />
					</view>
					<view class="flex-a-i mt30 pb20 ">
						<view class="wwf">联系电话</view>
						<input class="input" placeholder-style="color:#999;" v-model="phone" type="number" maxlength="11" placeholder="请输入手机号" />
					</view>
					<view @click="visible = true" class="flex-ju-b mt30 pb20 ">
		
						<view class="flex-a-i">
							<view class="wwf">所在地区</view>
							<view v-if="defaultRegion" class="input ">
								{{defaultRegion.provinceName}} 
								{{defaultRegion.cityName}} 
								{{defaultRegion.areaName}} 
							</view>
							<view v-else class="input  color999">
								省、市、区
							</view>
							
							<!-- <input class="input" v-model="defaultRegion" placeholder="省、市、区" /> -->
						</view>
						<view class="color999 size24 flex-a-i">
							<uni-icons type="right" color="#999"></uni-icons>
						</view>
		
					</view>
					<view class="flex mt30 pb20">
						<view>
							<view class="wwf">详细地址</view>
						</view>
						<textarea  class="input"  v-model="address" placeholder-style="color:#999;" placeholder="小区楼栋/乡村名称" auto-height>
						</textarea>
					</view>
					<view class="flex-a-i color222 size23 mt50">
						<image @click="kai(0)" v-if="is_default" mode="widthFix" src="/static/gougou.png" class="width27 image mr10"></image>
						<view @click="kai(1)" v-else class="wh23-23 ra23 border000 mr10"></view>
						设为默认地址
					</view>
				</view>
				<view  style="box-shadow: 0rpx -8rpx 24rpx 0rpx rgba(0,0,0,0.06);" class="flex-ju-c mt30 pt10 ra20">
					<view @click="addc" class="wh645-100 flex-ju-c ra20 bg000 colorfff">
						保存
					</view>
				</view>
			</view>
		</uni-popup>
				 
		<uni-popup type="center" border-radius="20px 20px" ref="mima">
			<view class="pt40 pb40 posire wh500-440 bgfff ra30">
				<view class="flex-ju-c">
					<image mode="widthFix" src="/static/tancc.png" class="width127 posiab top-60"></image>
				</view>
				<view class="flex-ju-c size29  mb5 mt80">
					<view>确认兑换吗？</view>
				</view>
				<view class="flex-ju-c color999 size24 ">
					此操作不可逆
				</view>
				<view class="flex-ju-c flex-col mt80 ">
					<view @click="tapgoumai" class="bold srgb bg000 colorfff wh430-100 ra20 flex-ju-c">确认</view>
					<view @click="$refs.mima.close()" class="bold srgb wh694-100 ra100 flex-ju-c">取消</view>
				</view>
				
			</view>
		</uni-popup>
<cityPicker  :default-value="defaultValue" :mask-close-able="maskCloseAble" @confirm="confirm" @cancel="cancel" :visible="visible"/>
	</view>

</template>

<script>
	 import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
	    export default {
	 components: {
	            cityPicker
	        },
		
		data() {
			return {
				addreslist:[],
				hidden: uni.getStorageSync('hidden'),
				wallet: "HF",
				number: 1,
				info: {},
				walletStatus: {},
				theme: uni.getStorageSync('theme'),
				is_box: "",
				iap: {},
				addresses:[],
				infoaddress:"",
				maskCloseAble: true,
				address:"",
				is_default:0,
				type:0,
				ed:{},
				defaultValue: '420103',
								phone:"",
								consignee:"",
								province:"",
								city:"",
								district:"",
								defaultRegion:{
								}, 
								visible: false 
								 
			}
		},
		onLoad(option) {
			this.info =JSON.parse(option.info) 
			this.getaddress()
		},
		mounted() {
			
		},
		methods: {
			editaddress(index){
				this.type=1
				this.$refs.address.close()
				this.ed = this.addresses[index]
				this.phone = this.ed.phone
				this.consignee = this.ed.consignee
				this.defaultRegion.provinceName = this.ed.province
				this.defaultRegion.cityName = this.ed.city
				this.defaultRegion.areaName = this.ed.district
				this.address = this.ed.address
				this.is_default = this.ed.is_default
				this.$refs.add.open()
			},
			getaddress(){
				this.http("addresses").then(res=>{
					this.addresses=res.data.addresses
					res.data.addresses.map(item=>{
						if(item.is_default==1){
							this.infoaddress=item
						}
					})
				})
			},
			setresses(id){
				this.http("addresses/"+id, {
					is_default:1
				},'put').then(res=>{
					this.$refs.address.close()
					this.getaddress()
				})
			},
			adddizhi(){
				this.type=0
				this.$refs.address.close()
				this.$refs.add.open()
			},
			deladdres(index,id,is_default){
				uni.showModal({
					title:"确定要删除吗？",
					success:(res)=> {
						if (res.confirm) {
							this.http("/addresses/"+id, {},'delete').then(res=>{
								if(is_default==1){
									this.infoaddress=""
									this.getaddress()
								}
								uni.showToast({
									title: "删除地址成功",
									icon: "none"
								})
								this.addresses.splice(index,1)
							})
							
						}
					}
				})
			},
			tianjiadd(){
				this.http("addresses").then(res=>{
					this.addresses=res.data.addresses
					this.$refs.address.open()
				})
			},
			addc(){
				if(!this.phone){
					uni.showToast({
						title:"联系电话空",
						icon:"none"
					})
					return
				}
				if(!this.consignee){
					uni.showToast({
						title:"收货人空",
						icon:"none"
					})
					return
				}
				if(!this.defaultRegion.provinceName){
					uni.showToast({
						title:"选择地区",
						icon:"none"
					})
					return
				}
				if(!this.address){
					uni.showToast({
						title:"地址不能空",
						icon:"none"
					})
					return
				}
				
				let pr =''
				let str =''
				if(this.type==1){
					pr ='put'
					str = this.ed.uuid
				}else{
					pr ='post'
					str=''
				}
					this.http("addresses/"+str,{
						phone:this.phone,
						consignee:this.consignee,
						province:this.defaultRegion.provinceName,
						city:this.defaultRegion.cityName,
						district:this.defaultRegion.areaName,
						address:this.address,
						is_default:this.is_default
					},pr).then(res=>{
						uni.showToast({
							title:"保存成功",
							icon:"none"
						})
						if(this.type==1||this.is_default==1){
							this.getaddress()
						}
						this.$refs.add.close()
					})
				},
				kai(i){
					this.is_default = i
				},
			confirm (val) {
				console.log(val)
				this.defaultRegion =val
				this.visible = false
			},
			cancel () {
				this.visible = false
			},
				
			lijhuan(){
				if(this.infoaddress.length==0){
					uni.showToast({
						title:"选择地址",
						icon:"none"
					})
					return
				}
				this.$refs.mima.open()
			},
			tapgoumai(){
				this.http('integralExchange',{
					uuid:this.info.uuid
				},'post').then(res=>{
					uni.redirectTo({
						url:"suu"
					})
				})
			},
			tapnumebrs(index) {
				if (index == 1) {
					if (this.number > 1) {
						this.number--
					}
				} else {
					this.number++
				}
			}
		}
	}
</script>

<style>
/deep/ .uni-picker-view-mask {
		background: none;
	}

	/deep/ .uni-picker-view-indicator:before {
		border-top: 1px solid #343435;
	}

	/deep/ .uni-picker-view-indicator:after {
		border-bottom: 1px solid #343435;
	}
	.kai{
		width: 80rpx;
	}
		.wwf {
			color:#222;
			width: 150rpx;
		}
	
		.input {
			font-size: 29rpx;
		}
</style>